<template>
  <div class="index">
    <top-bar></top-bar>
    <transition name="left">
    <router-view />
    </transition>
  </div>
</template>
<script>
import TopBar from '../../components/index/TopBar'
export default {
  data () {
    return {
      
    }
  },
  components:{
    TopBar
  },
  watch: {
    $route(to, from) {
      console.log(to.path)
      console.log(from.path)
    }
  },
  mounted () {
    // console.log(this.$route)
  }
}
</script>
<style scoped>
  .index{
    height: 100%;
    background: #000;
  }
  .left-enter-active, .left-leave-active{
    transition: all 0.5s;
  }
  .left-enter, .left-leave-to{
    opacity: 1;
    transform: translateX(100%);
  }
</style>